{% extends 'a_header.html' %}
{% load static %}
{% block title %}show article{% endblock %}
{% block linkFiles %}
    <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}" />
    <link rel="stylesheet" href="{% static 'css/show_article.css' %}">

{% endblock %}
{% block UserInfo %}
    <a href="{% url 'account:index' %}?u_id={{ request.user.id }}" class="navbar-item">
        <img src="data:;base64,{{ imgUserData }}" alt="" id="UserImg">
    </a>
{% endblock %}
{% block mainContent %}
<div class="section">
  <div class="container">
    <div class="tile">
        <div class="tile is-vertical is-parent is-8">
            <header>
              <h1>{{ article.title }}</h1>
                <div class="AuthorInfo">
                    <img src="data:;base64,{{ imgAuthorData }}" alt="" id="AuthorImage">
                    <p id="AuthorName">
                        <a href="{% url 'account:index' %}?u_id={{ article.u_id }}"><strong>{{ article.u.username }}</strong></a>
                        <span id="Signature">{{ article.u.signature }}</span>
                    </p>
                </div>
            </header>
            <div class="article-content">
                <div id='editormd-view'>
                    <textarea id="append-test">{{ article.content }}</textarea>
                </div>
            <div id="editormd-view">
                <div id="post-time-info">
                    <p>发表时间</p>
                    <p>{{ article.created }}</p>
                </div>
            </div>

            <div class="action-box-bottom">
            <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                        <span class="icon is-large" style="width: fit-content">喜欢<span id="like_count">{{ article.like.count }}</span></span>
                </a>

            <a class="ml-10" id="show_comments" onclick="show({{ article.id }},'{{ request.user.username }}','{{ imgUserData }}')">
                <i class="fa fa-comment"></i>
                <span id="commentsNum">{{ article.comment_set.count }} 条评论</span>
                <span id="commentsAction" style="display: none">收起评论</span>
            </a>
            <span id="LikeAction" onclick="like({{ request.GET.a_id }})">
                {% if request.user in article.like.all %}
                 <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="red" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
                  <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"></path>
                </svg>
                {% else %}
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
                  <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"></path>
                </svg>
                {% endif %}

            <p>喜欢</p>
            </span>
            <span id="EyeAction" onclick="eye({{ request.GET.a_id }})">
                {% if request.user in article.eye.all %}
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="red" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                </svg>
                {% else %}
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                </svg>
                {% endif %}
            <p>在看</p>
            </span>
            <span id="CollectAction" onclick="collect({{ request.GET.a_id }})">
                {% if request.user in article.collect.all %}
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="red" class="bi bi-bookmarks" viewBox="0 0 16 16">
                    <path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4zm2-1a1 1 0 0 0-1 1v10.566l3.723-2.482a.5.5 0 0 1 .554 0L11 14.566V4a1 1 0 0 0-1-1H4z"></path>
                    <path d="M4.268 1H12a1 1 0 0 1 1 1v11.768l.223.148A.5.5 0 0 0 14 13.5V2a2 2 0 0 0-2-2H6a2 2 0 0 0-1.732 1z"></path>
                </svg>
                {% else %}
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="" class="bi bi-bookmarks" viewBox="0 0 16 16">
                    <path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4zm2-1a1 1 0 0 0-1 1v10.566l3.723-2.482a.5.5 0 0 1 .554 0L11 14.566V4a1 1 0 0 0-1-1H4z"></path>
                    <path d="M4.268 1H12a1 1 0 0 1 1 1v11.768l.223.148A.5.5 0 0 0 14 13.5V2a2 2 0 0 0-2-2H6a2 2 0 0 0-1.732 1z"></path>
                </svg>
                {% endif %}
            <p>收藏</p>
            </span>
        </div>
            </div>
        </div>

{% block rightBlock %}
    <div class="tile is-vertical is-parent">
        <div class="card">
          <div class="card-header">
            <p class="card-header-title">陶陶涵热搜</p>
          </div>
          <div class="card-content">
            <ul class="lh-20">
              <li><a href="#">演员的诞生第十期</a><i class="fa fa-fire"></i></li>
              <li><a href="#">北航陈小武</a><i class="fa fa-fire"></i></li>
              <li><a href="#">微信跳一跳</a><i class="fa fa-fire"></i></li>
              <li><a href="#">解忧杂货店</a></li>
              <li><a href="#">前任3</a></li>
              <li><a href="#">妖猫传</a></li>
              <li><a href="#">琅琊榜2</a></li>
              <li><a href="#">刘昊然</a></li>
              <li><a href="#">黄轩</a></li>
              <li><a href="#">比特币</a></li>
            </ul>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <p class="card-header-title">陶陶涵热搜</p>
          </div>
          <div class="card-content">
            <ul class="lh-20" id="ArticleFireInfo">
                <li>关注量</li>
                <li>浏览量</li>
            </ul>
          </div>
        </div>
    </div>
{% endblock %}
</div>
    </div>
  </div>
{% endblock %}
{% block jsFiles %}
    <script src='{% static "editor/lib/marked.min.js" %}'></script>
    <script src='{% static "editor/lib/prettify.min.js" %}'></script>
    <script src='{% static "editor/lib/raphael.min.js" %}'></script>
    <script src='{% static "editor/lib/underscore.min.js" %}'></script>
    <script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script>
    <script src='{% static "editor/lib/flowchart.min.js" %}'></script>
    <script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script>
    <script src='{% static "editor/editormd.js" %}'></script>
    <script src="{% static 'js/article/show_article_manage.js' %}"></script>
{% endblock %}